﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>漂亮的颜色渐变Bootstrap表单样式</title>
    <!-- Bootstrap core CSS-->
    
    <!-- Custom Style-->
    <link href="css/my-form-style.css" rel="stylesheet" />

  <!-- Custom styles for this template-->
  <link href="css/sb-admin-2.css" rel="stylesheet">

</head>
<body>


    <div class="container-fluid">
        
<header class="text-center">漂亮的颜色渐变Bootstrap表单样式</header>

        <div class="row">
            <div class="col-lg-6 mx-auto">
                <div class="card gradient-scooter">
                    <div class="card-body">
                        <div class="card-title text-uppercase text-white"><i class="fa fa-address-book-o"></i> User Registration</div>
                        <hr>
                        <form class="color-form">
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="input-1">First Name</label>
                                    <input type="text" class="form-control" id="input-1" placeholder="Enter First Name">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="input-2">Last Name</label>
                                    <input type="text" class="form-control" id="input-2" placeholder="Enter Last Name">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="input-3">Date of Birth</label>
                                    <input type="text" class="form-control" id="input-3" placeholder="Your Date of Birth">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="input-4">Your Age</label>
                                    <input type="text" class="form-control" id="input-4" placeholder="Your Age">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="input-5">Contact Number</label>
                                <input type="text" class="form-control" id="input-5" placeholder="Enter Contact Number">
                            </div>
                            <div class="form-group">
                                <label for="input-6">Email ID</label>
                                <input type="text" class="form-control" id="input-6" placeholder="Enter Email Address">
                            </div>
                            <div class="form-group">
                                <label for="input-7">Password</label>
                                <input type="text" class="form-control" id="input-7" placeholder="Enter Password">
                            </div>
                            <div class="form-group">
                                <label for="input-8">Confirm Password</label>
                                <input type="text" class="form-control" id="input-8" placeholder="Confirm Password">
                            </div>
                            <div class="form-group">
                                <div class="demo-checkbox">
                                    <input type="checkbox" id="user-checkbox1" class="filled-in chk-col-info" checked="" />
                                    <label for="user-checkbox1">I Accept Terms & Conditions</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-link bg-white text-info shadow px-5"><i class="icon-lock"></i> Register</button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card gradient-ibiza">
                    <div class="card-body">
                        <div class="card-title text-uppercase text-white"><i class="fa fa-address-book-o"></i> User Registration</div>
                        <hr>
                        <form class="color-form">
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="input-9">First Name</label>
                                    <input type="text" class="form-control form-control-rounded" id="input-9" placeholder="Enter First Name">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="input-10">Last Name</label>
                                    <input type="text" class="form-control form-control-rounded" id="input-10" placeholder="Enter Last Name">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="input-11">Date of Birth</label>
                                    <input type="text" class="form-control form-control-rounded" id="input-11" placeholder="Your Date of Birth">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="input-12">Your Age</label>
                                    <input type="text" class="form-control form-control-rounded" id="input-12" placeholder="Your Age">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="input-13">Contact Number</label>
                                <input type="text" class="form-control form-control-rounded" id="input-13" placeholder="Enter Contact Number">
                            </div>
                            <div class="form-group">
                                <label for="input-14">Email ID</label>
                                <input type="text" class="form-control form-control-rounded" id="input-14" placeholder="Enter Email Address">
                            </div>
                            <div class="form-group">
                                <label for="input-15">Password</label>
                                <input type="text" class="form-control form-control-rounded" id="input-15" placeholder="Enter Password">
                            </div>
                            <div class="form-group">
                                <label for="input-16">Confirm Password</label>
                                <input type="text" class="form-control form-control-rounded" id="input-16" placeholder="Confirm Password">
                            </div>
                            <div class="form-group">
                                <div class="demo-checkbox">
                                    <input type="checkbox" id="user-checkbox2" class="filled-in chk-col-danger" checked="" />
                                    <label for="user-checkbox2">I Accept Terms & Conditions</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-link btn-round bg-white text-danger shadow px-5"><i class="icon-lock"></i> Register</button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card gradient-ohhappiness">
                    <div class="card-body">
                        <div class="card-title text-uppercase text-white"><i class="fa fa-address-book-o"></i> User Registration</div>
                        <hr>
                        <form class="color-form">
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="input-17">First Name</label>
                                    <input type="text" class="form-control form-control-square" id="input-17" placeholder="Enter First Name">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="input-18">Last Name</label>
                                    <input type="text" class="form-control form-control-square" id="input-18" placeholder="Enter Last Name">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="input-19">Date of Birth</label>
                                    <input type="text" class="form-control form-control-square" id="input-19" placeholder="Your Date of Birth">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="input-20">Your Age</label>
                                    <input type="text" class="form-control form-control-square" id="input-20" placeholder="Your Age">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="input-21">Contact Number</label>
                                <input type="text" class="form-control form-control-square" id="input-21" placeholder="Enter Contact Number">
                            </div>
                            <div class="form-group">
                                <label for="input-22">Email ID</label>
                                <input type="text" class="form-control form-control-square" id="input-22" placeholder="Enter Email Address">
                            </div>
                            <div class="form-group">
                                <label for="input-23">Password</label>
                                <input type="text" class="form-control form-control-square" id="input-23" placeholder="Enter Password">
                            </div>
                            <div class="form-group">
                                <label for="input-24">Confirm Password</label>
                                <input type="text" class="form-control form-control-square" id="input-24" placeholder="Confirm Password">
                            </div>
                            <div class="form-group">
                                <div class="demo-checkbox">
                                    <input type="checkbox" id="user-checkbox3" class="filled-in chk-col-success" checked="" />
                                    <label for="user-checkbox3">I Accept Terms & Conditions</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-link btn-square bg-white text-success shadow px-5"><i class="icon-lock"></i> Register</button>
                            </div>
                        </form>
                    </div>
                </div>


                <div class="card gradient-royal">
                    <div class="card-body">
                        <div class="card-title text-uppercase text-white"><i class="fa fa-address-book-o"></i> User Registration</div>
                        <hr>
                        <form class="color-form">
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="input-25">First Name</label>
                                    <input type="text" class="form-control" id="input-25" placeholder="Enter First Name">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="input-26">Last Name</label>
                                    <input type="text" class="form-control" id="input-26" placeholder="Enter Last Name">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="input-27">Date of Birth</label>
                                    <input type="text" class="form-control" id="input-27" placeholder="Your Date of Birth">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="input-28">Your Age</label>
                                    <input type="text" class="form-control" id="input-28" placeholder="Your Age">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="input-29">Contact Number</label>
                                <input type="text" class="form-control" id="input-29" placeholder="Enter Contact Number">
                            </div>
                            <div class="form-group">
                                <label for="input-30">Email ID</label>
                                <input type="text" class="form-control" id="input-30" placeholder="Enter Email Address">
                            </div>
                            <div class="form-group">
                                <label for="input-31">Password</label>
                                <input type="text" class="form-control" id="input-31" placeholder="Enter Password">
                            </div>
                            <div class="form-group">
                                <label for="input-32">Confirm Password</label>
                                <input type="text" class="form-control" id="input-32" placeholder="Confirm Password">
                            </div>
                            <div class="form-group">
                                <div class="demo-checkbox">
                                    <input type="checkbox" id="user-checkbox4" class="filled-in chk-col-dark" checked="" />
                                    <label for="user-checkbox4">I Accept Terms & Conditions</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-link bg-white text-dark shadow px-5"><i class="icon-lock"></i> Register</button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div><!--End Row-->


        <div class="row">
            <div class="col-lg-12 mx-auto">

                <div class="card gradient-scooter">
                    <div class="card-body">
                        <div class="card-title text-uppercase text-white"><i class="fa fa-address-book-o"></i> User Registration</div>
                        <hr>
                        <form class="color-form">
                            <div class="form-group row">
                                <label for="input-33" class="col-sm-2 col-form-label">First Name</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="input-33" placeholder="Enter First Name">
                                </div>
                                <label for="input-34" class="col-sm-2 col-form-label">Last Name</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="input-34" placeholder="Enter Last Name">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-35" class="col-sm-2 col-form-label">Date of Birth</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="input-35" placeholder="Enter Date of Birth">
                                </div>
                                <label for="input-36" class="col-sm-2 col-form-label">Your Age</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="input-36" placeholder="Enter Your Age">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-37" class="col-sm-2 col-form-label">Contact Number</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="input-37" placeholder="Enter Contact Number">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-38" class="col-sm-2 col-form-label">Email</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="input-38" placeholder="Enter Email Address">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-39" class="col-sm-2 col-form-label">Password</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="input-39" placeholder="Enter Password">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-40" class="col-sm-2 col-form-label">Confirm Password</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="input-40" placeholder="Confirm Password">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"></label>
                                <div class="col-sm-10">
                                    <div class="demo-checkbox">
                                        <input type="checkbox" id="user-checkbox5" class="filled-in chk-col-info" checked="" />
                                        <label for="user-checkbox5">I Accept Terms & Conditions</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"></label>
                                <div class="col-sm-10">
                                    <button type="submit" class="btn btn-link bg-white text-info shadow px-5"><i class="icon-lock"></i> Register</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>


                <div class="card gradient-orange">
                    <div class="card-body">
                        <div class="card-title text-uppercase text-white"><i class="fa fa-address-book-o"></i> User Registration</div>
                        <hr>
                        <form class="color-form">
                            <div class="form-group row">
                                <label for="input-41" class="col-sm-2 col-form-label">First Name</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control form-control-rounded" id="input-41" placeholder="Enter First Name">
                                </div>
                                <label for="input-42" class="col-sm-2 col-form-label">Last Name</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control form-control-rounded" id="input-42" placeholder="Enter Last Name">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-43" class="col-sm-2 col-form-label">Date of Birth</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control form-control-rounded" id="input-43" placeholder="Enter Date of Birth">
                                </div>
                                <label for="input-44" class="col-sm-2 col-form-label">Your Age</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control form-control-rounded" id="input-44" placeholder="Enter Your Age">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-45" class="col-sm-2 col-form-label">Contact Number</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control form-control-rounded" id="input-45" placeholder="Enter Contact Number">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-46" class="col-sm-2 col-form-label">Email</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control form-control-rounded" id="input-46" placeholder="Enter Email Address">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-47" class="col-sm-2 col-form-label">Password</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control form-control-rounded" id="input-47" placeholder="Enter Password">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-48" class="col-sm-2 col-form-label">Confirm Password</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control form-control-rounded" id="input-48" placeholder="Confirm Password">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"></label>
                                <div class="col-sm-10">
                                    <div class="demo-checkbox">
                                        <input type="checkbox" id="user-checkbox6" class="filled-in chk-col-warning" checked="" />
                                        <label for="user-checkbox6">I Accept Terms & Conditions</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"></label>
                                <div class="col-sm-10">
                                    <button type="submit" class="btn btn-link btn-round bg-white text-warning shadow px-5"><i class="icon-lock"></i> Register</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>


                <div class="card gradient-titanium">
                    <div class="card-body">
                        <div class="card-title text-uppercase text-white"><i class="fa fa-address-book-o"></i> User Registration</div>
                        <hr>
                        <form class="color-form">
                            <div class="form-group row">
                                <label for="input-49" class="col-sm-2 col-form-label">First Name</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control form-control-square" id="input-49" placeholder="Enter First Name">
                                </div>
                                <label for="input-50" class="col-sm-2 col-form-label">Last Name</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control form-control-square" id="input-50" placeholder="Enter Last Name">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-51" class="col-sm-2 col-form-label">Date of Birth</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control form-control-square" id="input-51" placeholder="Enter Date of Birth">
                                </div>
                                <label for="input-52" class="col-sm-2 col-form-label">Your Age</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control form-control-square" id="input-52" placeholder="Enter Your Age">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-53" class="col-sm-2 col-form-label">Contact Number</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control form-control-square" id="input-53" placeholder="Enter Contact Number">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-54" class="col-sm-2 col-form-label">Email</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control form-control-square" id="input-54" placeholder="Enter Email Address">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-55" class="col-sm-2 col-form-label">Password</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control form-control-square" id="input-55" placeholder="Enter Password">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="input-56" class="col-sm-2 col-form-label">Confirm Password</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control form-control-square" id="input-56" placeholder="Confirm Password">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"></label>
                                <div class="col-sm-10">
                                    <div class="demo-checkbox">
                                        <input type="checkbox" id="user-checkbox7" class="filled-in chk-col-dark" checked="" />
                                        <label for="user-checkbox7">I Accept Terms & Conditions</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"></label>
                                <div class="col-sm-10">
                                    <button type="submit" class="btn btn-link btn-square bg-white text-dark shadow px-5"><i class="icon-lock"></i> Register</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>


            </div>
        </div><!--End Row-->
    </div>



</body>
</html>
 
